<template>
  <div>
    <!-- PC端 -->
    <template v-if="!isMobile">
      <!-- 顶部导航栏 -->
      <div class="flex w-fll h-[70px] bg-[#5EA1F9] justify-between pl-6 pr-6">
        <div class="text-white text-xl leading-[70px]">家政服务CRM系统</div>
        <el-menu class="el-menu-demo" mode="horizontal" :ellipsis="false">
          <el-menu-item index="0" @click="goHome">首页</el-menu-item>
          <el-menu-item index="1" @click="goOrder">订单管理</el-menu-item>
          <el-menu-item index="2" @click="goMember">会员管理</el-menu-item>
          <el-menu-item index="3" @click="goStaff" v-if="authStore.canEmployee">员工管理</el-menu-item>
          <el-menu-item index="4" @click="goShop" v-if="authStore.canShop">店铺管理</el-menu-item>
          <el-menu-item index="5" @click="goStatistics" v-if="authStore.canData">数据统计</el-menu-item>
          <el-menu-item index="6" @click="goPermission" v-if="authStore.isSuper">权限管理</el-menu-item>
        </el-menu>
        <div class="w-[200px] h-[70px] text-white leading-[70px]">
          <span class="text-sm">
            <el-icon>
              <User />
            </el-icon>
            <span v-if="authStore.isSuper">超级管理员</span>
            <span v-else>普通管理员</span>
          </span>
          <el-button :icon="SwitchButton" class="ml-6" @click="exit">退出</el-button>
        </div>
      </div>
      <!-- 当前位置区域 -->
      <div class="bg-white h-14 flex items-center text-xl pl-6">
        <el-icon class="mr-5">
          <Location />
        </el-icon>
        <el-breadcrumb :separator-icon="ArrowRight">
          <el-breadcrumb-item>当前位置</el-breadcrumb-item>
          <el-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="index" :to="{ path: item.path }">{{ item.meta.title }}</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="ml-auto">
          <el-button type="warning" class="mr-10" size="large" style="width: 180px; font-size: 17px;" v-show="isOrder"
            @click="goCreateOrder">新建订单</el-button>
          <el-button type="warning" class="mr-10" size="large" style="width: 180px; font-size: 17px;" v-show="isMember"
            @click="showCreateMember">新增会员</el-button>
          <el-button type="warning" class="mr-10" size="large" style="width: 180px; font-size: 17px;" v-show="isStaff" 
            @click="createStore.toggleAddStaffDialog">添加员工</el-button>
          <el-button type="warning" class="mr-10" size="large" style="width: 180px; font-size: 17px;" v-show="isPermission"
            @click="createStore.toggleAdminDialog">新增管理员</el-button>
        </div>
      </div>
    </template>
    <!-- 移动端 -->
    <template v-else>
      <div class="bg-[#5EA1F9] h-14 flex items-center text-xl pl-6 text-white">
        <div class="mobile-menu-btn flex items-center h-full mr-3" @click="drawerVisible = true">
          <el-icon><Menu /></el-icon>
        </div>
        <el-icon class="mr-5">
          <Location />
        </el-icon>
        <el-breadcrumb :separator-icon="ArrowRight" class="breadcrumb-white">
          <el-breadcrumb-item>当前位置</el-breadcrumb-item>
          <el-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="index" :to="{ path: item.path }">{{ item.meta.title }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!-- 移动端侧边栏 Drawer -->
      <el-drawer v-model="drawerVisible" direction="ltr" size="150px" :with-header="false">
        <el-menu class="mobile-menu" mode="vertical">
          <el-menu-item index="0" @click="goHome">首页</el-menu-item>
          <el-menu-item index="1" @click="goOrder">订单管理</el-menu-item>
          <el-menu-item index="2" @click="goMember">会员管理</el-menu-item>
          <el-menu-item index="3" @click="goStaff" v-if="authStore.canEmployee">员工管理</el-menu-item>
          <el-menu-item index="4" @click="goShop" v-if="authStore.canShop">店铺管理</el-menu-item>
          <el-menu-item index="5" @click="goStatistics" v-if="authStore.canData">数据统计</el-menu-item>
          <el-menu-item index="6" @click="goPermission" v-if="authStore.isSuper">权限管理</el-menu-item>
          <el-menu-item index="7" @click="exit">退出</el-menu-item>
        </el-menu>
      </el-drawer>
    </template>
  </div>
</template>

<script setup lang="ts" name="header">
import { User, SwitchButton, ArrowRight, Location, Menu } from '@element-plus/icons-vue'
import { ref, watch, onMounted, onUnmounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import useMyRouter from '@/hooks/useMyRouter';
import { useCreateStore } from '@/stores/useCreateStore';
import { useAuthStore } from '@/stores/authStore';
const authStore = useAuthStore()
interface MetaType {
  title: string
}
interface breadcrumbType {
  path: string,
  meta: MetaType
}
const route = useRoute()
const router = useRouter()
const createStore = useCreateStore()
let breadcrumbList = ref<breadcrumbType[]>([])
let isOrder = ref(false)
const isMember = ref(false)
const isStaff = ref(false)
const isPermission = ref(false)
const drawerVisible = ref(false)
const isMobile = ref(false)
const checkMobile = () => {
  isMobile.value = window.innerWidth <= 768
}
onMounted(() => {
  checkMobile()
  window.addEventListener('resize', checkMobile)
})
onUnmounted(() => {
  window.removeEventListener('resize', checkMobile)
})
const generateBreadcrumb = () => {
  const routeList = route.matched.filter(record => record.meta && record.meta.title)
  breadcrumbList.value = routeList.map(record => ({
    path: record.path,
    meta: record.meta as unknown as MetaType
  }))
}
const newOrder = () => {
  if (route.path === '/level/order') {
    isOrder.value = true
    isMember.value = false
    isStaff.value = false
    isPermission.value = false
  } else if (route.path === '/level/staff') {
    isOrder.value = false
    isMember.value = false
    isStaff.value = true
    isPermission.value = false
  } else if (route.path === '/level/member') {
    isOrder.value = false
    isMember.value = true
    isStaff.value = false
    isPermission.value = false
  }else if(route.path === '/level/permission'){
    isOrder.value = false
    isMember.value = false
    isStaff.value = false
    isPermission.value = true
  }
  else {
    isOrder.value = false
    isMember.value = false
    isStaff.value = false
    isPermission.value = false
  }
}
const showCreateMember = () => {
  createStore.showCreateMember = true
}
generateBreadcrumb()
watch(() => route.path, generateBreadcrumb)
watch(() => route.path, newOrder, { immediate: true })
const { goHome, goOrder, goMember, goStaff, goCreateOrder, goShop, goStatistics, goPermission, exit } = useMyRouter(router)
</script>

<style scoped>
.el-menu--horizontal.el-menu {
  height: 70px;
  border: 0;
}

.el-menu-item {
  width: 100px;
  background-color: #5EA1F9;
  color: white;
}

.el-menu--horizontal>.el-menu-item.is-active {
  color: white !important;
  border-bottom: 2px solid transparent;
}

.el-menu--horizontal .el-menu-item:not(.is-disabled):focus,
.el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
  background-color: #437BC6;
  color: white;
}

/* 不被选中时的颜色 */
.el-breadcrumb :deep(.el-breadcrumb__inner) {
  color: black !important;
  font-weight: 400 !important;
}

/* 被选中时的颜色 */
.el-breadcrumb__item:last-child :deep(.el-breadcrumb__inner) {
  color: black !important;
  font-weight: 800 !important;
}

.el-breadcrumb__item :deep(.el-breadcrumb__separator) {
  color: black;
  font-size: 12px;
}

:deep(.el-breadcrumb__item:not(:first-child) .el-breadcrumb__inner:hover) {
  cursor: pointer !important;
}

.mobile-menu-btn {
  background: #5EA1F9;
  border-radius: 6px;
  padding: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
}
@media (max-width: 768px) {
  .el-menu-demo {
    display: none !important;
  }
  .mobile-menu-btn {
    display: flex;
  }
  :deep(.breadcrumb-white .el-breadcrumb__inner) {
    color: #fff !important;
  }
  :deep(.breadcrumb-white .el-breadcrumb__separator) {
    color: #fff !important;
  }
  :deep(.breadcrumb-white .el-breadcrumb__item:last-child .el-breadcrumb__inner) {
    color: #fff !important;
    font-weight: bold !important;
  }
}
</style>